<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>认识jQuery</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        #d1{
            background-color: lightblue;
        }
        #d2{
            background-color: lightcoral;
        }
        #d3{
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ul>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <br/>
    <select class="addr">
        <option value="无锡">江苏无锡</option>
        <option value="合肥">安徽合肥</option>
        <option value="杭州">浙江杭州</option>
    </select>
    <br/>
    <input type="text" name="username" id="username" />
    <p>这是一个p段落标签</p>
    <h1>这是一个H标题标签</h1>
</body>
</html>
<script src="../js/jquery-1.11.0.min.js"></script>
<script>
    //点击事件
    $("#d1").click(function(){
        //css 获取样式、设置样式
        let d1Color = $(this).css("background-color")
        console.log(d1Color)
        $("#d3").css({"background-color":d1Color})
        $(this).css({"background-color":"blue" , "border-radius":"50%"})
    })

    //针对下拉菜单，添加改变事件
    $(".addr").change(function(){
        //val() 获取 、 设置 表单元素的值
        let addr = $(this).val()
        console.log(addr)
        //设置input输入框的值
        $("#username").val(addr)

        //设置p段落标签中的文本text()
        $("p").text(addr)
        //设置H标题标签中的网页内容html()
        $("h1").html("<span style='color:red'>"+addr+"</span>")
    })
    
    //给li添加点击事件
    $("li").click(function(){
        //获取li的下标
        let index = $(this).index();
        console.log(index)
        //将与下标匹配的div隐藏起来hide()   show()显示出来
        $("div").eq(index).hide();
    })
</script>